<template>
  <div class="box">
    <el-rwo class="title">{{ form.cptName }}
      <el-button class="button" type="success" link>{{
        typeStr
      }}</el-button></el-rwo>
    <el-row class="title">比赛时间：{{ form.matchTimeStr }} 报名时间：{{
      form.signTimeStr
    }}
      参赛队：{{ Groups }} 参赛运动员：{{ signers }}
    </el-row>
    <br>
    <el-rwo>
      <!-- 搜索区域 -->
      <el-form ref="queryRef" :model="queryParams" :inline="true">
        <el-form-item label="团体名称" prop="name">
          <el-input
            v-model="queryParams.groupName"
            placeholder="赛事名称"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="提交时间" prop="name">
          <el-date-picker
            v-model="queryParams.data"
            style="width: 360px"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="审核状态" prop="status">
          <el-select v-model="queryParams.status">
            <el-option label="全部" :value="-1" />
            <el-option label="未支付" :value="0" />
            <el-option label="等待审核" :value="1" />
            <el-option label="待核销" :value="10" />
            <el-option label="审核已通过" :value="2" />
            <el-option label="审核未通过" :value="3" />
            <el-option label="已取消" :value="4" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="info" icon="Refresh" @click="reset">重置</el-button>
          <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
          <el-button type="warning" icon="Download" @click="handleImport">导出</el-button>
        </el-form-item>
      </el-form>
      <el-radio-group v-model="tabPosition">
        <el-radio-button label="参赛队报名" @change="group" />
        <el-radio-button label="个人报名" @change="personage" />
        <el-button
          type="warning"
          :disabled="flag"
          style="margin-left: 10px"
          @click="batchPass"
        >批量审核通过</el-button>
        <el-button type="danger" :disabled="flag" @click="batchRefuse">
          批量审核拒绝</el-button>
      </el-radio-group>
      <br>
      <br>
    </el-rwo>
    <el-table
      v-loading="loading"
      :data="list"
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" type="index" width="55" align="center" />
      <el-table-column
        v-if="!auditShow"
        label="参报人"
        prop="personName"
        min-width="120"
        align="center"
      />
      <el-table-column
        v-if="!auditShow"
        label="性别"
        prop="sexStr"
        min-width="120"
        align="center"
      />
      <el-table-column
        v-if="!auditShow"
        label="手机号"
        prop="phone"
        min-width="120"
        align="center"
      />
      <el-table-column
        v-if="!auditShow"
        label="证件号"
        prop="idcCode"
        min-width="220"
        align="center"
      />
      <el-table-column
        v-if="auditShow"
        label="报名团体"
        prop="groupName"
        min-width="120"
        align="center"
      >
        <template #default="props">
          <div>
            {{ props.row.groupName || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="auditShow"
        label="团体类型"
        prop="groupTypeStr"
        min-width="120"
        align="center"
      >
        <template #default="props">
          <div>
            {{ props.row.groupTypeStr || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="auditShow"
        label="参报人数"
        prop="groupSigners"
        min-width="120"
        align="center"
      />
      <el-table-column
        v-if="auditShow"
        label="参报人次"
        prop="groupSignerTimes"
        min-width="80"
        align="center"
      />
      <el-table-column
        label="提交时间"
        prop="submitTime"
        min-width="160"
        align="center"
        :sortable="'custom'"
      />
      <el-table-column
        label="审核状态"
        prop="verityStatusStr"
        min-width="120"
        align="center"
      />
      <el-table-column
        label="费用总额"
        prop="total"
        min-width="120"
        align="center"
      >
        <template #default="scope">
          <div v-if="scope.row.total == undefined">0</div>
        </template>
      </el-table-column>
      <el-table-column
        label="缴费金额"
        prop="payment"
        min-width="120"
        align="center"
      >
        <template #default="scope">
          <div v-if="scope.row.payment == undefined">0</div>
        </template>
      </el-table-column>
      <el-table-column
        label="缴费方式"
        prop="payType"
        min-width="120"
        align="center"
      >
        <template #default="scope">
          <div v-if="scope.row.payType == 0">会员支付</div>
          <div v-if="scope.row.payType == 1">微信支付</div>
          <div v-if="scope.row.payType == 2">线下支付</div>
          <div v-if="!scope.row.payType">/</div>
        </template>
      </el-table-column>

      <!-- 动态数据 -->
      <el-table-column
        v-for="(item, index) in groupList"
        v-if="queryParams.signType==1"
        :key="index"
        :label="item.key"
        min-width="120"
        align="center"
      >
        <template #default="props">
          <div v-if="props?.row?.groupInfoList">
            <div v-if="props?.row?.groupInfoList[index]">
              <div v-if="props.row.groupInfoList[index]?.type == 2">
                <div v-if="props.row.groupInfoList[index]?.value">
                  <!-- pc端 -->
                  <a
                    v-if="props.row.groupInfoList[index]?.value?.url"
                    target="_blank"
                    :href="props.row.groupInfoList[index]?.value?.url"
                  >{{ props.row.groupInfoList[index]?.value?.name }}
                  </a>
                  <!-- 小程序 -->
                  <a
                    v-else-if="props.row.groupInfoList[index]?.value[0]?.url"
                    target="_blank"
                    :href="props.row.groupInfoList[index]?.value[0]?.url"
                  >{{ props.row.groupInfoList[index]?.value[0]?.name }}
                  </a>
                  <div v-else>/</div>
                </div>
            
              </div>

              <div v-else-if="props.row.groupInfoList[index]?.type == 3">
                <div v-if="props.row.groupInfoList[index]?.value">
                  <el-image
                    v-if="props.row.groupInfoList[index]?.value?.url"
                    style="width: 80px; height: 80px"
                    :src="props.row.groupInfoList[index]?.value?.url"
                    :fit="fit"
                    @click="imgClick(props.row.groupInfoList[index]?.value?.url)"
                  />
                  <el-image
                    v-else-if="props.row.groupInfoList[index]?.value"
                    style="width: 80px; height: 80px"
                    :src="props.row.groupInfoList[index]?.value"
                    :fit="fit"
                    @click="imgClick(props.row.groupInfoList[index]?.value)"
                  />
                  <div v-else>/</div>
                </div>
            
              </div>

              <div v-else>
                <div v-if="props.row.groupInfoList[index]?.value">
                  {{ props.row.groupInfoList[index].value }}
                </div>
                <div v-else>/</div>
              </div>
            </div>
          
          </div>
         
        </template>
      </el-table-column>

      <el-table-column
        v-if="!active"
        label="操作"
        align="center"
        class-name="small-padding"
        width="300"
        fixed="right"
      >
        <template #default="scope">
          <el-button
            v-if="
              scope.row.verityStatus == 1 &&
                scope.row.verityStatusStr != '待核销'
            "
            type="text"
            @click="auditFN(scope.row)"
          >审核通过</el-button>
          <el-button
            v-if="
              scope.row.verityStatus == 1 &&
                scope.row.verityStatusStr != '待核销'
            "
            type="text"
            @click="refuseFN(scope.row)"
          >审核拒绝</el-button>
          <el-button
            v-if="scope.row.verityStatus == 2"
            type="text"
            @click="sendBackFN(scope.row)"
          >
            退回</el-button>
          <el-button
            v-if="scope.row.verityStatusStr != '待核销'"
            type="text"
            @click="particularsFN(scope.row)"
          >详情</el-button>

          <el-button
            v-if="
              scope.row.verityStatusStr == '待核销' || scope.row.payStatus == 6
            "
            type="text"
            @click="particularsFN(scope.row)"
          >核销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="dialogVisible"
      title=""
      width="50%"
    >
      <el-image style="width: 100%; height: 100%;" :src="bigImg" :fit="fit" />
    </el-dialog>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="initData"
    />
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { getReviewList, checkCancel, verityOrder } from '@/api/match/review.js'
import { getCurrentInstance } from '@vue/runtime-core'
const tabPosition = ref('参赛队报名')
const auditShow = ref(true)
const { proxy } = getCurrentInstance()
const router = useRoute()
const route = useRouter()
const id = ref(router.query.id)
const signers = ref(router.query.signers)
const Groups = ref(router.query.groups)
const flag = ref(true)
const total = ref()
const active = ref(router.query.active)
const typeStr = ref(router.query.typeStr)
const list = ref([])
const dialogVisible = ref(false)
const bigImg = ref()
const groupList = ref([])
const data = reactive({
  selectForm: {
    cptId: id.value,
    groupType: -1,
    status: -1,
    orderFlag: 0,
    submitTimeRange: '',
    groupName: '',
    type: -1,
    data: []
  },
  
  queryParams: {
    type: -1,
    cptId: id.value,
    groupType: -1,
    orderFlag: 0,
    status: -1,
    signType: 1,
    groupName: '',
    submitTimeRange: '',
    pageSize: 10,
    pageNum: 1
  },
  form: {},
  operator: {}
})
const { queryParams, form, operator, selectForm } = toRefs(data)

initData()
async function initData() {
  list.value = []
  let num = 0
  groupList.value = []
  queryParams.value.submitTimeRange = queryParams.value.data?.join()
  const res = await getReviewList(queryParams.value)
  form.value = res.data
  total.value = res.data.signInfoList.total
  list.value = res.data.signInfoList.rows
  for (var i of list.value) {
    if (i.groupInfoList) {
      i.lang = i.groupInfoList?.length
      for (var v of i.groupInfoList) {
        if (v.type == 2 || v.type == 3) {
          try {
            v.value = JSON.parse(v.value)
          } catch (error) {
            
          }
        }
      }
    }
  }
  list.value.forEach(item => {
    if (item.lang > num) {
      num = item.lang
      groupList.value = item.groupInfoList
    }
  })  
}

// 图片放大
function imgClick(url) {
  bigImg.value = url
  dialogVisible.value = true
}

// 查询
function handleQuery() {
  initData()
}
function reset() {
  queryParams.value.status = -1
  queryParams.value.submitTimeRange = ''
  queryParams.value.groupName = ''
  queryParams.value.orderFlag = 0
  queryParams.value.data = []
  initData()
}

function personage() {
  auditShow.value = false
  queryParams.value.signType = 0
  initData()
  console.log(queryParams.value.signType)
}

function group() {
  auditShow.value = true
  queryParams.value.signType = 1
  initData()
  console.log(queryParams.value.signType)
}

// flag  0 线下核销 1 审核通过 2 审核拒绝 3 订单取消
// 详情
function particularsFN(row) {
  console.log(row)

  if (row.total !== null) {
    route.push({
      path: '/match/Details',
      query: {
        orderId: row.orderId,
        personId: row.personId,
        type: row.groupType,
        typeStr: typeStr.value,
        cptName: form.value.cptName,
        payType: row.payType,
        payStatus: row.payStatus,
        verityStatus: row.verityStatus,
        groups: Groups.value,
        sporters: signers.value
      }
    })
  } else {
    route.push({
      path: '/match/Detail',
      query: {
        orderId: row.orderId,
        verityStatus: row.verityStatus
      }
    })
  }
}

function handleSelectionChange(e) {
  console.log(111)

  operator.value.orderIds = []
  if (e.length == 0) {
    flag.value = true
  } else {
    flag.value = false
  }
  e?.forEach((item) => {
    operator.value.orderIds.push(item.orderId)
  })
}

// 批量审核通过
async function batchRefuse() {
  operator.value.flag = '2'
  const res = await verityOrder(operator.value)
  if (res.code == 200) {
    proxy.$modal.msgSuccess('操作成功')
    initData()
  } else {
    proxy.$modal.msgError('操作失败')
  }
}

// 批量审核拒绝
async function batchPass() {
  operator.value.flag = '1'
  const res = await verityOrder(operator.value)
  if (res.code == 200) {
    proxy.$modal.msgSuccess('操作成功')
    initData()
  } else {
    proxy.$modal.msgError('操作失败')
  }
}

// 取消
async function cancelFN(row) {
  operator.value.orderId = row.orderId
  operator.value.flag = '3'
  const res = await checkCancel(operator.value)
  if (res.code == 200) {
    proxy.$modal.msgSuccess('操作成功')
  } else {
    proxy.$modal.msgError('操作失败')
  }
  initData()
}
// 退回
async function sendBackFN(row) {
  operator.value.orderId = row.orderId
  operator.value.flag = '3'
  const res = await checkCancel(operator.value)
  if (res.code == 200) {
    proxy.$modal.msgSuccess('操作成功')
  } else {
    proxy.$modal.msgError('操作失败')
  }
  initData()
}

// 审核通过
async function auditFN(row) {
  operator.value.orderId = row.orderId
  operator.value.flag = '1'
  const res = await checkCancel(operator.value)
  if (res.code == 200) {
    proxy.$modal.msgSuccess('操作成功')
  } else {
    proxy.$modal.msgError('操作失败')
  }
  initData()
}

// 审核拒绝
async function refuseFN(row) {
  operator.value.orderId = row.orderId
  operator.value.flag = '2'
  const res = await checkCancel(operator.value)
  if (res.code == 200) {
    proxy.$modal.msgSuccess('操作成功')
  } else {
    proxy.$modal.msgError('操作失败')
  }
  initData()
}

// 降序升序
function sortChange(column) {
  // 升序
  if (column.order == 'ascending') {
    queryParams.value.orderFlag = 1
  } else if (column.order == 'descending') {
    queryParams.value.orderFlag = 0
  } else {
    queryParams.value.orderFlag = 0
  }
  initData()
}

/** 导出按钮操作 */
function handleImport() {
  proxy.download(
    '/league/sign/cptSignerDetails/export',
    {
      ...queryParams.value
    },
    `job_log_${new Date().getTime()}.xlsx`
  )
}
</script>

<style scope>
.box {
  padding: 30px;
}
.title {
  display: flex;
  line-height: 35px !important;
  justify-content: center;
}
.size {
  font-size: 20px;
}
.button {
  margin-left: 30px;
}
.nav-title {
  font-size: 18px;
  margin-right: 30px;
  line-height: -3px;
}
.el-row {
  border: 0;
}
.title {
  background-color: 0;
}
</style>
